<template>
  <div class="uploadPhotoItem">
    <span class="myProgress">
      <span class="plan"></span>
      30%
    </span>
    <img :src="imgUrl" />
    <span class="pictureName"> {{ item.name }} </span>
  </div>
</template>

<script>
export default {
  props: ["item"],
  // file -> base64
  data() {
    return {
      imgUrl: "",
    };
  },
  created() {
    const render = new FileReader();

    render.onload = () => {
      // file -> base64
      //   console.log(render.result);
      this.imgUrl = render.result;
    };
    // file -> Blob
    render.readAsDataURL(this.item);
  },
};
</script>

<style></style>
